<template>
  <Dialog :title="t('candidate.fields.applyDetail')" v-model="dialogVisible">
    <el-descriptions :column="1" border label-width="120">
      <el-descriptions-item :label="t('candidate.fields.awardId')" width="280">
        {{ formData.awardsName }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('candidate.fields.templateId')" width="280">
        {{ formData.templateName }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('candidate.fields.year')" width="280">
        {{ formData.year }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('candidate.fields.jobCode')" width="280">
        {{ formData.jobCode }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('candidate.fields.studentName')" width="280">
        {{ formData.studentName }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('candidate.fields.gender')" width="280">
        {{ formData.gender }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('candidate.fields.researchDept')" width="280">
        {{ formData.researchDept }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('candidate.fields.mentorName')" width="280">
        {{ formData.mentorName }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('candidate.fields.mentorCode')" width="280">
        {{ formData.mentorCode }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('candidate.fields.major')" width="280">
        {{ formData.major }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('candidate.fields.awardMajor')" width="280">
        {{ formData.awardMajor }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('candidate.fields.studentLevel')" width="280">
        {{ formData.studentLevel }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('candidate.fields.awardLevel')" width="280">
        {{ formData.awardLevel }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('candidate.fields.accountType')" width="280">
        {{ formData.accountType }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('candidate.fields.processStatus')" width="280">
        <el-button link type="primary" @click="openProcessInstance()">
          <span v-if="formData.processStatus === 0"
            >{{ t('candidate.index.processStatus.underway') }}
          </span>
          <span v-if="formData.processStatus === 1"
            >{{ t('candidate.index.processStatus.passed') }}
          </span>
          <span v-if="formData.processStatus === 2"
            >{{ t('candidate.index.processStatus.failed') }}
          </span>
          <span v-if="formData.processStatus === 3"
            >{{ t('candidate.index.processStatus.draft') }}
          </span>
        </el-button>
      </el-descriptions-item>
      <!--      <el-descriptions-item :label="t('candidate.fields.qualityStatus')" width="280">-->
      <!--        <div v-if="formData.qualityStatus === 0"-->
      <!--          >{{ t('candidate.index.qualityStatus.unset') }}-->
      <!--        </div>-->
      <!--        <div v-if="formData.qualityStatus === 1"-->
      <!--          >{{ t('candidate.index.qualityStatus.passed') }}-->
      <!--        </div>-->
      <!--        <div v-if="formData.qualityStatus === 2"-->
      <!--          >{{ t('candidate.index.qualityStatus.failed') }}-->
      <!--        </div>-->
      <!--        <div v-if="formData.qualityStatus === 3"-->
      <!--          >{{ t('candidate.index.qualityStatus.notRequired') }}-->
      <!--        </div>-->
      <!--      </el-descriptions-item>-->
      <el-descriptions-item :label="t('candidate.fields.result')" width="280">
        <div v-if="formData.result === 0">{{ t('candidate.index.result.unset') }}</div>
        <div v-if="formData.result === 1">{{ t('candidate.index.result.passed') }}</div>
        <div v-if="formData.result === 2">{{ t('candidate.index.result.failed') }}</div>
      </el-descriptions-item>
      <el-descriptions-item :label="t('candidate.fields.attachment')" width="280">
        <FileObjectDownload :file-json="formData.attachment ?? '{}'" />
      </el-descriptions-item>
      <el-descriptions-item :label="t('candidate.fields.historyAwardsJson')" width="280">
        {{ JSON.parse(formData.historyAwardsJson ?? '[]').join('、') }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('candidate.fields.selfIntroduction')" width="280">
        {{ formData.selfIntroduction }}
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
    </template>
  </Dialog>
  <ProcessInstancePopupView ref="processInstancePopupView" />
</template>
<script setup lang="ts">
import { CandidateApi, CandidateVO } from '@/api/awards/candidate'
import ProcessInstancePopupView from '@/views/bpm/processInstance/detail/ProcessInstancePopupView.vue'
import FileObjectDownload from '@/components/FileObjectDownload/index.vue'

/** 候选人 表单 */
defineOptions({ name: 'CandidateDetailForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false)
const formData = ref<Partial<CandidateVO>>({})

/** 打开弹窗 */
const open = async (id: string) => {
  dialogVisible.value = true
  formLoading.value = true
  try {
    formData.value = await CandidateApi.getCandidate(id)
  } finally {
    formLoading.value = false
  }
}

const processInstancePopupView = ref<InstanceType<typeof ProcessInstancePopupView>>()
const openProcessInstance = () => {
  if (formData.value.processInstanceId) {
    processInstancePopupView.value?.show(formData.value.processInstanceId)
  } else {
    message.error('未找到流程实例')
  }
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
